<template>
  <section id="page-main">
    <div class="main">
      <section class="text-container"></section>
    </div>
    <section class="require">
      <h2>创业必需的服务</h2>
      <h3>为小微企业提供财务及管理服务</h3>
      <div>
        <div class="service-type"
             v-for="(type, type_i) in require_service"
             :key="type.id"
             :class="{active: type_i === require_service_current}"
             @mousemove="clearCarousel(type_i)"
             @mouseleave="carousel"
             @click="require_service_current = type_i">
          {{ type.name }}
        </div>
      </div>
      <div class="service-content"
           v-for="(type, type_i) in require_service"
           :key="type.id"
           @mousemove="clearCarousel(null)"
           @mouseleave="carousel"
           v-show="type_i === require_service_current">
        <div class="intro">
          <h4>{{ type.name }}</h4>
          <p v-for="des in type.des.split('\n')" :key="des">{{ des }}</p>
        </div>
        <div class="content">
          <div class="left-arrow" @click="servicePrev" v-if="type.services.length>3"></div>
          <div class="right-arrow" @click="serviceNext" v-if="type.services.length>3"></div>
          <div class="list" :style="{left: -250 * type.services_page + 'px'}">
            <div class="item"
                 v-for="item in type.services"
                 :key="item.id">
              <div class="img">
                <img :src="item.logo">
              </div>
              <h5>{{ item.name }}</h5>
              <p>{{ item.des }}</p>
              <h6>{{ item.price }}元起</h6>
              <div>
                <button @click="$fn.openQQ">
                  <img src="../assets/images/qq.png" alt="">
                  在线咨询
                </button>
                <button @click="$fn.openQQ">立即办理</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="flow">
      <h3 class="section-title">全方位流程为您服务</h3>
      <p class="section-desc">知道详细服务流程,办理简单效率</p>
      <ul class="flow-list">
        <li
          v-for="(item, index) in flow_list"
          :key="item.title"
          @mousemove="flow_item_selected = index"
          @click="flow_item_selected = index"
        >
          <div :class="index === flow_item_selected ? 'img-container img-container-active' : 'img-container'">
            <img :src="index === flow_item_selected ? item.img_selected : item.img_url" alt="">
          </div>
          <div class="text-container">
            <h4 class="title">{{item.title}}</h4>
            <p class="desc">{{item.desc}}</p>
          </div>
        </li>
      </ul>
    </section>
    <section class="industry">
      <h3 class="section-title">了解行业资讯</h3>
      <p class="section-desc">这里会有您在创业过程中遇到的问题和知识</p>
      <ul
        class="information">
        <li
          v-for="(item,index) in articles"
          :key="item.title + index"
        >
          <nuxt-link
            class="info"
            :to="{path:'/article/detail', query: {id: item.id}}"
          >

            <div class="img-container">
              <ratio-img
                :use-width="true"
                :ratio="12/16"
                border-radius="none"
                :src="item.header_url"
              ></ratio-img>
            </div>
            <div class="text-container">
              <h4 class="title">{{item.title}}</h4>
              <div class="desc">{{item.sub_content}}</div>
            </div>
          </nuxt-link>
        </li>
      </ul>
    </section>
    <section class="partner">
      <h3 class="section-title">我们合作的客户</h3>
      <p class="section-desc">超过上万家客户选择我们</p>
      <ul class="goodness">
        <li
          v-for="item in goodness"
          :key="item.title"
        >
          <div class="img-container">
            <img :src="item.img_url" :alt="item.title">
          </div>
          <section class="text-container">
            <h4 class="title">{{item.title}}</h4>
            <p class="desc">{{item.desc}}</p>
          </section>
        </li>
      </ul>
    </section>
    <contract-us></contract-us>
  </section>
</template>

<script>
  import '../assets/less/index.less'
  import contractUs from '~/components/contract-us.vue'
  import ratioImg from '../components/ratio-img'
  function getCategories() {
    let { $axios } = this
    return $axios
      .$get('/api/v1/categories')
      .then(response => {
        for (let i = 0; i < response.length; i++) {
          response[i].services_page = 0
        }
        return response
      })
      .catch(response => {
        return []
      })
  }
  function getArticles() {
    let { $axios } = this
    return  $axios
      .$get('/api/v1/informations', {
        params: {
          page: 1,
          size: 4
        }
      })
      .then(res => {
        return res.data || []
      })
      .catch(res => {
        return []
      })
  }
  export default {
    async asyncData({ $axios }) {
      let self = {
        $axios
      }
      let require_service = [],
        articles = [],
        loaded = false
      try{
        if(!window){
          [require_service, articles] = await Promise.all([
            getCategories.call(self),
            getArticles.call(self)
          ])
          loaded = true
        }
      }catch (e) {}

      return {
        loaded: loaded,
        flow_item_selected: 0,
        require_service_current: 0,
        require_service: require_service,
        flow_list: [{
          title: '售前咨询',
          desc: '下单5分钟之内响应及时了解需求',
          img_url: require('../assets/images/main_27.png'),
          img_selected: require('../assets/images/main_27-selected.png')
        }, {
          title: '定制方案',
          desc: '根据您的需求，客户专员会制定一套详细的服务方案',
          img_url: require('../assets/images/main_16.png'),
          img_selected: require('../assets/images/main_16-selected.png')
        }, {
          title: '一对一服务',
          desc: '进度专员、材料专员、外勤人员为您 办理相关事宜',
          img_url: require('../assets/images/main_18.png'),
          img_selected: require('../assets/images/main_18-selected.png')
        }, {
          title: '合同洽谈',
          desc: '如果您对我们的方案和服务认可进行洽谈合同事宜',
          img_url: require('../assets/images/main_24.png'),
          img_selected: require('../assets/images/main_24-selected.png')
        }, {
          title: '确认签单',
          desc: '双方对合同和条款都没有异议，确认签单',
          img_url: require('../assets/images/main_26.png'),
          img_selected: require('../assets/images/main_26-selected.png')
        }, {
          title: '售后服务',
          desc: '我们会高效准确的为您提供优质的售后服务',
          img_url: require('../assets/images/main_28.png'),
          img_selected: require('../assets/images/main_28-selected.png')
        }],
        articles: articles,
        goodness: [{
          title: '价格透明',
          desc: '统一报价，无隐形消费',
          img_url: require('../assets/images/main_52.png')
        }, {
          title: '信息安全',
          desc: '个人信息安全有保障',
          img_url: require('../assets/images/main_53.png')
        }, {
          title: '专人服务',
          desc: '一对一专属顾问7*24小时金牌服务',
          img_url: require('../assets/images/main_54.png')
        }, {
          title: '售后无忧',
          desc: '个人信息安全有保障',
          img_url: require('../assets/images/main_55.jpg')
        }]
      }
    },
    mounted() {
      this.carousel()
      if(!this.loaded){
        this.getArticles()
        this.getCategories()
      }
    },
    methods: {
      async getCategories(){
        let require_service = await getCategories.call(this)
        this.require_service = require_service || []
      },
      async getArticles(){
        let articles = await getArticles.call(this)
        this.articles = articles || []
      },
      carousel() {
        let t = setInterval(() => {
          let current = this.require_service_current
          let len = this.require_service.length
          if (current >= len - 1) {
            this.require_service_current = 0
          } else {
            this.require_service_current += 1
          }
        }, 2000)
        this.carousel_t = t
      },
      clearCarousel(type_i) {
        clearInterval(this.carousel_t)
        if (type_i !== null) {
          this.require_service_current = type_i
        }
      },
      servicePrev() {
        let index = this.require_service_current
        let item = this.require_service[index]
        if (item.services_page > 0) {
          this.require_service[index].services_page -= 1
        }
      },
      serviceNext() {
        let index = this.require_service_current
        let item = this.require_service[index]
        if (item.services_page < item.services.length - 3) {
          this.require_service[index].services_page += 1
        }
      }
    },
    layout: 'common',
    components: {
      contractUs,
      ratioImg
    }
  }
</script>
